<script setup lang="ts">
import HomeCrumbs from './homeCrumbs/HomeCrumbs.vue'
</script>

<template>
	<div class="flex flex-col flex-1 p-5 w-0">
		<!-- 面包屑导航栏 -->
		<home-crumbs />

		<!-- 主内容 -->
		<n-card _flex="~ col 1" _overflow="hidden" _pos="relative">
			<div _flex="~ col 1" _p="r-5" _transition="duration-300" _overflow="y-auto x-hidden">
				<router-view v-slot="{ Component }">
					<keep-alive>
						<transition
							leave-to-class="opacity-0 translate-x-1/4"
							enter-from-class="opacity-0 -translate-x-10"
							mode="out-in"
						>
							<component :is="Component" _flex="1" _transform="gpu" _transition="duration-300" />
						</transition>
					</keep-alive>
				</router-view>
			</div>
		</n-card>
	</div>
</template>

<style scoped>
:deep(.n-card__content) {
	@apply flex pr-2 overflow-hidden relative;
}
</style>
